<template>
	<view class="_abbr">
		<view class="public">
			<view class="card_title">工作台</view>
			<view class="flexBox flexBox2">
				<view @click="goPage(1)">
					<!-- <view>阿里巴巴</view> -->
					<view>现场拍照</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Index',
		onLoad() {
			this.$store.dispatch('user/getUserInfo');
		},
		methods: {
			goPage(index) {
				let URL = '';
				switch (index) {
					case 1:
						URL = '/pages/view/assist/alibaba/index';
						break;
				}
				uni.navigateTo({
					url: URL
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	._abbr {
		background-color: rgba(244, 249, 254, 1);
		height: 100vh;
		position: absolute;
		top: 0;
		width: 100vw;
		.public {
			background-color: #ffffff;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			border:1px solid;
			border-color:rgba(0, 124, 233, 0.4);

			.card_title {
				font-size: larger;
				font-weight: bolder;
				border-bottom: 1px solid black;
			}

			.flexBox {
				display: flex;
				flex-flow: row wrap;
				align-content: flex-start;
				justify-content: space-around;

				>view {
					box-sizing: border-box;
					flex: 0 0 22%;
					text-align: center;
					margin-top: 20rpx;
					// border: 1px solid #00f;
					// height: 40px;
				}
			}

			.flexBox1 {
				>view {
					:nth-child(1) {
						font-size: x-large;
						color: black;
					}
				}
			}

			.flexBox2 {
				>view {
					// padding: 10rpx;

					:nth-child(1) {
						background-color: #000000;
						color: white;
						font: larger bold;
						font-family: '楷体';
						aspect-ratio: 1/1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}

					:visited {
						background-color: #5500ff;
						color: whitesmoke;
					}

					:active {
						background-color: yellow;
						color: #5500ff;
						font: x-large bolder;
						font-family: '楷体';
					}
				}
			}
			.flexBox3 {
				>view {
					padding: 10px;
					flex: 0 0 20%;
					:nth-child(1) {
						background-color: #000000;
						color: white;
						// font: larger bold;
						font-family: '楷体';
						aspect-ratio: 1/1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
					}
					:visited {
						background-color: #5500ff;
						color: whitesmoke;
					}
					
					:active {
						background-color: yellow;
						color: #5500ff;
						// font: x-large bolder;
						font-family: '楷体';
					}
				}
			}
		}

		.tabbar {
			position: sticky;
			bottom: 30upx;
			z-index: 999;
		}
	}
</style>